<template>
	<view class="box">
		<uNavbar title="数字身份卡" bgColor="transparent"></uNavbar>
		<view class="tab-nav">
			<view class="tab-list-item" v-for="(item,index) in identiy_card" :key="index" @click="clickToggleHandle(item,index)">
				<view :class="index == inx?'active':''" class="text">{{ item.name }}</view>
			</view>
		</view>
		<view class="wrap">
			<image  class="cardimg" src="/static/image/cardimage.png" mode=""></image>
			<view class="name">
				{{detailsss.name}}
			</view>
			<view :class="detailsss.is_card?'tips':'tip'">
				 {{detailsss.is_card?'权益享用中':'权益待激活'}}
			</view>
			<view class="content">
				 {{detailsss.goods_type == 2?"数字身份卡":'道具卡'}}
			</view>
		</view>
		<view class="main">
			<view class="tit">
				<view class="line">
					
				</view>
				<text>会员特权</text>
				<view class="line"></view>
			</view>
			<view class="item_wrap" :style="privilegeVip.length>3 ? itemstyle1 : itemstyle ">
				<view class="item" v-for="(item2,index) in privilegeVip" :key="item2.equity_icon_id + index">
					<image :src="item2.equity_images" mode="aspectFill"></image>
					<text class="text1">{{item2.equity_name}}</text>
					<text class="text2">{{item2.equity_value}}</text>
				</view>
			</view>
			<!-- <view class="btn" @click="applyToJoin" > -->
			<view class="btn" @click="applyToJoin" v-if="!detailsss.is_card">
				<image class="highlights" src="../../static/image/mask.png" mode=""></image>
				申请加入
			</view>
		</view>
	</view>
</template>

<script>
	import {brandDetails} from "../../api/store.js";
	export default {
		data() {
			return {
				ids:'',
				inx:0,
				brandAlls:{},
				toggleList: [{
						label: '遣唐使',
						select: true
					},
					{
						label: '唐太师',
						select: false
					}
				],
				selval: "遣唐使",
				itemstyle:"justify-content: space-around;",
				itemstyle1:"justify-content: flex-start;",
				length:4,
				identiy_card:[],
				detailsss:{},
				privilegeVip:{}
			}
		},
		onLoad(e) {
			console.log(e);
			this.ids = e.id
		},
		onShow() {
			this.inx = 0
			this.isBrandDetails()
		},
		methods: {
			//品牌发行方详情
			isBrandDetails(){
				let data = {
					id:this.ids
				}
				brandDetails(data).then(res=>{
					console.log(res)
					if(res.code == 1){
					this.identiy_card = res.data.identiy_card
					this.detailsss = res.data.identiy_card[0]
					this.privilegeVip = res.data.identiy_card[0].equity_json
					}
				})
			},
			clickToggleHandle(item,index) {
				console.log(item);
				this.inx = index
				this.detailsss = item
				this.privilegeVip = item.equity_json
			},
			applyToJoin(){
				uni.navigateTo({
					url:"/pagesMy/brandCenter/numbercardtwo?id=" + this.detailsss.goods_id
				})
			}

		},
	}
</script>

<style lang="scss" scoped>
	@font-face {
		font-family: 'iconfont2';
		src: url("~@/iconfont/YouSheBiaoTiHei.ttf");
	}
	.box {
		width: 750rpx;
		height: 100vh;
		background-color: #262241;
		position: relative;
	}

	.tab-nav {
		width: 750rpx;
		height: 100rpx;
		background-color: #262241;
		// margin-left: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		z-index: 999;

		.tab-list-item {
			position: relative;
			width: 350rpx;

			.text {
				display: flex;
				justify-content: center;
				align-items: center;
				margin-left: 50rpx;
				padding: 20rpx;
				height: 52rpx;
				opacity: 1;
				font-weight: 400;
				text-align: center;
				font-size: 32rpx;
				color: #A6A5AF;
			}

			.active {
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
			}
		}
	}
	.wrap{
		width: 672rpx;
		height: 268rpx;
		margin: 0 auto;
		background-image: url("../../static/image/cardbg.png");
		background-size: 672rpx 268rpx;
		margin-top: 180rpx;
		position: relative;
		.cardimg{
			width: 108rpx;
			height: 208rpx;
			position: absolute;
			left: 34rpx;
			top: -54rpx;
		}
		.name{
			top: 36rpx;
			left: 176rpx;
			position: absolute;
			font-weight: 400;
			font-size: 36rpx;
			color: #FFFFFF;
		}
		.tip{
			top: 86rpx;
			left: 176rpx;
			position: absolute;
			font-weight: 400;
			font-size: 28rpx;
			color: #E9ADEF;
		}
		.tips{
			top: 86rpx;
			left: 176rpx;
			position: absolute;
			font-weight: 400;
			font-size: 28rpx;
			color: #ffffff;
		}
		.content{
			font-family: iconfont2;
			font-weight: 400;
			font-size: 72rpx;
			color: #FFFFFF;
			position: absolute;
			bottom: 16rpx;
			left: 34rpx;
			opacity: 0.3;
		}
	}
	.main{
		width: 750rpx;
		height: 996rpx;
		background: #2A2753;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		margin-top: 110rpx;
		.tit{
			width: 750rpx;
			margin: 0 auto;
			height: 50rpx;
			display: flex;
			align-items: center;
			padding-top: 20rpx;
			justify-content: center;
			.line{
				width: 84rpx;
				height: 0rpx;
				border: 2rpx solid rgba(255,255,255,0.2);
			}
			>text{
				margin-left: 24rpx;
				margin-right: 24rpx;
				font-weight: 400;
				font-size: 36rpx;
				color: #FFFFFF;
			}
		}
		.item_wrap{
			width: 750rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-start;
			margin-top: 50rpx;
			.item{
				width: 214rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-top: 20rpx;
				margin-left: 30rpx;
				>image{
					width: 88rpx;
					height: 88rpx;
					border-radius: 10rpx;
				}
				.text1{
					font-weight: 500;
					font-size: 28rpx;
					color: rgba(255,255,255,0.6);
					margin-top: 14rpx;
				}
				.text2{
					font-weight: 400;
					font-size: 24rpx;
					color: rgba(255,255,255,0.6);
					text-align: center;
				}
			}
			
		}
		.btn{
			position: relative;
			width: 682rpx;
			height: 80rpx;
			background: linear-gradient( 274deg, #0014FF 0%, #8020EF 50%, #FF2CDF 100%);
			border-radius: 26rpx 26rpx 26rpx 26rpx;
			margin: 0 auto;
			text-align: center;
			line-height: 80rpx;
			font-weight: 400;
			font-size: 32rpx;
			color: #FFFFFF;
			position: absolute;
			bottom: 50rpx;
			left: 30rpx;
		}
	}
</style>